<template>  
  <div class="my">
    <van-nav-bar title="成绩列表" fixed placeholder :border="false"></van-nav-bar>
    <van-notice-bar
    scrollable
    left-icon="volume-o"
    color="#1989fa" background="#ecf9ff" 
    text="欢迎各位家长来到汕头小学成绩管理列表页面"
  /> 
    <div class="listForm">
      <!-- 表格数据 -->
      <el-table :data="tableData.slice(handleChangeIndexF,handleChangeIndexL)" style="background-color: skyblue ">
        <el-table-column prop="id" label="ID" width="40px"/>
        <el-table-column prop="className" label="班级" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="p_phone" label="手机号" />
      </el-table>
      <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 5, 8, 10]"
      :small="small"
      :background="background"
      layout="total, sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from "../../components/TabBar/TabBar.vue";
import { ref, reactive, onMounted, toRefs, computed } from "vue";
import { getParentsList } from "@/api/api";
import { Toast } from "vant";
import { useStore } from "vuex";
export default {
  components: { TabBar },
  setup() {
    const store = useStore();
    const data = reactive({
      tableData: [],
      currentPage: 1,
      pageSize: 2,
      total: 0,
    });
    let phone = ref("");
    // let currentPage = ref(1)
    // let pageSize = ref(1)
    // let total = ref(0)
    onMounted(() => {
      phone = store.state.user.phone;
      // 刷新列表
      getList(phone);
    });
    // 计算属性
    const handleChangeIndexL = computed(()=>{
      // 当前页码 * 当前每页显示条数
      return data.currentPage * data.pageSize;
    })
    const handleChangeIndexF = computed(()=>{
      //  当前页码-1 * 当前每页显示的条数
      return (data.currentPage - 1) * data.pageSize
    })
    // 当前每页显示条数
    function handleSizeChange (val){
      // console.log('page',val);
      data.pageSize = val;
    }
    // 当前页码显示
    function handleCurrentChange(val){
      // console.log('curr',val);
      data.currentPage = val
    }
    // 获取列表
    const getList = (phone) => {
      getParentsList(phone).then((res) => {
        console.log(res);
        if (res.status === 200) {
          Toast.success({ type: "success", message: res.message });
          console.log(res.data.length);
          data.total = res.data.length;
          console.log("total", data.total);
          data.tableData = res.data;
        } else if (res.status === 404) {
          Toast.fail({ type: "error", message: res.msg });
        }
      });
    };
    return {
      ...toRefs(data),
      // total,
      // currentPage,
      // pageSize,
      phone,
      store,
      getList,
      handleSizeChange,
      handleCurrentChange,
      handleChangeIndexL,
      handleChangeIndexF,
    };
  },
};
</script>

<style lang="less" scoped>
.my{
  width: 100%;
  height: 100%;
  // 定位：子是绝对定位  父是相对定位
  position: fixed; //相对定位
  // position: absolute;//绝对定位
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:  auto ;
  // background-color: #409eff;
  background: url('@/assets/image/bg.png') center no-repeat;
  // background-color: pink;
  background-color: skyblue;
  background-size: 100% 100%;
  .listForm{
   
    width: 100%;
    position: absolute;
    // top: 10%;
    left: 50%;
    margin: 0 -50%;
  }
}
</style>
